<script setup lang="ts">
import { onMounted, provide, ref } from 'vue';
import UiLayer from './UiLayer.vue';
import { createApp } from '../lib/app';
import { resources } from '../lib/resources';
import { initPersonMove, loadSceneData } from '../lib/person';
const isLoaded = ref(false);

onMounted(async () => {
  
  const app = createApp("map3dContainer");
 
  provide("app", app); // 给子组件注入地图对象
 
  await app.loadResources(resources, {
      showShadertoy: false,
      showHtml: true
  })
  isLoaded.value = true;
 

  let res = await loadSceneData(app)

  initPersonMove(app, res.tubeEntity)

  let showArrow = false;
  const ui = await app.getConfigPane({ title: "设置", style: { width: "280px", overflow: "hidden"}});
  let cfg = [
    {
        type: 'checkbox',
        label: '显示流动箭头',
        getValue: () => showArrow,
        setValue: () => {
            showArrow = !showArrow;
            res.showHideFlowTexture(showArrow);
        }
    }
  ]

 cfg.forEach(c => ui.appendChild(c));
 
})

</script>

<template>
  <div id="map3dContainer"></div>
  <UiLayer v-if="isLoaded"></UiLayer>
</template>

<style scoped>
 #map3dContainer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000117;
  }
</style>
